@extends('layouts.backend')

@section('backendContent')

    <el-row style="padding-top: 68px;">
        <el-row style="background: #fff;margin-bottom: 10px;padding: 20px 0;">

            <el-row style="width: 1200px;margin:0 auto;">
                <el-row style="font-size: 20px;font-weight: 500;line-height: 28px;">@{{ form.title }}</el-row>
                <el-row style="color: #606266;font-size: 14px;margin-top:10px;">短链接：
                    <el-link>@{{form.domain ? (form.domain + '/') : domain}}@{{form.route}}</el-link>
                    <i @click="copy((form.domain ? (form.domain + '/') : domain) + form.route)" class="el-icon-document-copy" style="cursor:pointer;color:#409eff"></i>
                </el-row>
                <el-row style="color: #606266;font-size: 14px;margin-top:10px;">跳转链接：
                    <el-link>@{{form.long_url}}</el-link>
                </el-row>
                <el-row style="color: #606266;font-size: 14px;margin-top:10px;">创建时间：@{{ form.created_on }}</el-row>
            </el-row>

            <el-tabs v-model="activeName" style="width: 1200px;margin:20px auto;" @tab-click="handleTableClick">
                <el-tab-pane label="基本信息" name="first">
                    <el-form :model="form"
                             :rules="rules"
                             ref="form"
                             label-width="200px"
                             style="margin-top:20px;"
                             class="demo-ruleForm">

                        <el-form-item label="短链接标题" prop="title" required>
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>

                        <el-form-item label="绑定域名" prop="domain">
                            <el-input v-model="form.domain"></el-input>
                        </el-form-item>

                        <el-form-item label="短链接" prop="route" required>
                            <el-input placeholder="" v-model="form.route">
                                <template slot="prepend">@{{ form.domain ?  (form.domain + '/') : domain }}</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="短链接类型" prop="type">
                            <el-select v-model="form.type" placeholder="短链接类型">
                                <el-option label="普通链接" value="normal"></el-option>
                                <el-option label="区域链接" value="region"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="form.type === 'region'" label="指定省份不跳转" prop="long_url" required>
                            <el-select v-model="form.regions"
                                       multiple
                                       filterable
                                       style="width: 500px;"
                                       placeholder="请选择">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="跳转链接" prop="long_url" required>
                            <el-input v-model="form.long_url"></el-input>
                        </el-form-item>

                        <el-form-item label="默认跳转链接">
                            <el-input v-model="form.default_url"></el-input>
                        </el-form-item>

                        <el-form-item label="是否允许pc端点击" prop="remark">
                            <el-radio v-model="form.is_allow_pc" :label="1">是</el-radio>
                            <el-radio v-model="form.is_allow_pc" :label="0">否</el-radio>
                        </el-form-item>

                        <el-form-item label="是否允许qq点击" prop="remark">
                            <el-radio v-model="form.is_allow_qq" :label="1">是</el-radio>
                            <el-radio v-model="form.is_allow_qq" :label="0">否</el-radio>
                        </el-form-item>

                        <el-form-item label="是否允许微信点击" prop="remark">
                            <el-radio v-model="form.is_allow_wx" :label="1">是</el-radio>
                            <el-radio v-model="form.is_allow_wx" :label="0">否</el-radio>
                        </el-form-item>

{{--                        <el-form-item label="是否允许手机自带浏览器点击" prop="remark">--}}
{{--                            <el-radio v-model="form.is_allow_mobile_defalut_browser" :label="1">是</el-radio>--}}
{{--                            <el-radio v-model="form.is_allow_mobile_defalut_browser" :label="0">否</el-radio>--}}
{{--                        </el-form-item>--}}

                        <el-form-item label="是否允许安卓手机点击" prop="remark">
                            <el-radio v-model="form.is_allow_android" :label="1">是</el-radio>
                            <el-radio v-model="form.is_allow_android" :label="0">否</el-radio>
                        </el-form-item>

                        <el-form-item label="是否允许苹果手机点击" prop="remark">
                            <el-radio v-model="form.is_allow_apple" :label="1">是</el-radio>
                            <el-radio v-model="form.is_allow_apple" :label="0">否</el-radio>
                        </el-form-item>

                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit(form)">保存</el-button>
                            <el-button @click="goBack()">返回列表</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="访问日志" name="second">
                    <el-row style="margin-top:20px;">
                        <el-table
                            :data="log.data"
                            border>
                            <el-table-column
                                prop="city"
                                label="访问区域"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="client"
                                label="访问设备"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="ip"
                                label="访问IP"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="long_url"
                                label="访问链接"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="created_on"
                                label="访问时间"
                                width="">
                            </el-table-column>
                        </el-table>

                        <div class="block"
                             style="width: 1200px;margin: 20px auto;text-align: right;">
                            <el-pagination
                                @size-change="sizeChange"
                                @current-change="getAccessLog()"
                                :current-page.sync="log.current_page"
                                :page-sizes="[15, 50, 100, 200]"
                                :page-size="log.page_size"
                                layout="total, sizes, prev, pager, next"
                                :total="log.total">
                            </el-pagination>
                        </div>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-row>

    </el-row>


@endsection

@section('js')
    <script src="/js/short/detail.js?v=202210272255"></script>
@endsection
